<template>
  <view>
    <!-- <nav-bar title="头像"></nav-bar> -->
    <scroll-view scroll-y :style="{ height: mainHeight,padding:'25rpx' }">
      <!-- <uni-file-picker v-model="image" limit="1" :imageStyles="imageStyles" :sizeType='sizeType' @success="success"
        @fail="fail" @select="select($event, image)">
        <uni-icons type="camera-filled" size="30" color="#ccc"></uni-icons>
      </uni-file-picker> -->
      <view class="box">
        <view class="title">技师头像</view>
        <view class="text">请上传jpg、jpge、pdf格式</view>
        <view class="photo">
          <view class="image" v-if="!imgUrl" @click="openChooseImg">
            <u-icon name="plus" color="#666666" size="33"></u-icon>
          </view>
          <img :src="imgUrl" alt="" class="head-img" @click="openChooseImg" v-else>
        </view>
      </view>
      <view class="button" @click="submit">上传</view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import tabIndex from '../../components/statis/tab-index.vue'
import { getToken } from "@/utils/auth"
import { getUserData,editUserData } from '@/api/system/mine'
export default {
  name: 'uploadPhoto',
  components: { NavBar, tabIndex },
  data() {
    return {
      mainHeight: '',
      image:'',
      imgUrl:'',
      sizeType: ['compressed'],
      imageStyles: {
        width: 100,
        height: 100
      },
      userId:'',
      userData:{}
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
    this.userId = uni.getStorageSync('userId')
    this.getUserData()
  },
  methods: {
    getUserData() {
			getUserData({ userId:this.userId }).then((res) => {
			this.imgUrl = res.data.avatar
      this.userData = res.data
			})
		},
    select($event, key) {

      const tempFilePaths = $event.tempFilePaths
      tempFilePaths.forEach((item) => {
        uni.uploadFile({
          url: this.baseUrl + '/prod-api' + '/common/upload',
          // H5上传
          // file: tempFilePaths,
          // 微信小程序上传
          filePath: item,
          name: 'file',
          header: {
            "Authorization": 'Bearer ' + getToken()
          },
          // 成功函数
          success: (res) => {
            // 取到文档服务器的值
            this.$refs.uToast.show({
              message: '上传成功',
              type: 'success',
            })
            let uploadData = JSON.parse(res.data)
            let file = {}
            // 下面3个值是uni-app规定的一个不能少
            file.url = this.baseUrl + '/prod-api' + uploadData.fileName
            file.extname = ''
            file.name = uploadData.filename
            this.imageForm[key] = this.imageForm[key] || []
            this.imageForm[key].push({ url: this.baseUrl + uploadData.fileName, fileId: this.imageForm[key].length })
            const needForm = [
              { name: 'imageForm', key: 'url', splitIcon: ',' },
              { name: 'pickerForm', key: 'value', splitIcon: '-' }
            ]
            this.getCustomData(needForm)
          },
          // 失败提示用户重新上传
          fail: error => {
            this.$refs.uToast.show({
              message: '上传失败',
              type: 'warn',
            })
          }
        })
      })

    },
    success() {
      this.$refs.uToast.show({
        message: '提交成功',
        type: 'success',
      })
    },
    fail() {
      this.$refs.uToast.show({
        message: '修改失败',
        type: 'error',
      })
    },
    openChooseImg(){
      uni.chooseImage({
        count: 1, //最多可选择的张数
        sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
        success: res=> {
          this.imgUrl=res.tempFilePaths[0]   //把选择的头像赋值给imgurl
        }
      })
    },
    submit() {
      const params = {
        id:this.userData.id,
        avatar:this.imgUrl
      }
      editUserData(params).then((res) => {
        if(res.code === 200) {
      uni.redirectTo({
        url:'/subPages/mine/myMessage',
      })
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
background: #FFFFFF;
border-radius: 15rpx 15rpx 15rpx 15rpx;
opacity: 1;
padding: 20rpx 28rpx 55rpx;
.title {
  font-size: 40rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
color: #333333;
margin-bottom: 20rpx;
}
.text {
  font-size: 36rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
color: #666666;
margin-bottom: 38rpx;
}
.photo {
  display: flex;
  justify-content: center;
  align-items: center;
  .image {
    width: 245rpx;
height: 245rpx;
background: #F4F4F4;
border-radius: 50%;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
  }
  .head-img {
    width: 245rpx;
height: 245rpx;
border-radius: 50%;
opacity: 1;
  }

}
}
.button {
    width: 100%;
    height: 80rpx;
    opacity: 1;
    border-radius: 46rpx;
    background: rgba(194, 126, 21, 1);
    text-align: center;
    line-height: 80rpx;
    margin-top: 20rpx;
    font-size: 40rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);

  }
</style>